<template>
  <div>
    <div class="top"></div>
    <div class="head">
      <van-nav-bar
        fixed
        title="想看"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="wrap">
      <div class="filmCount">
        <span>共2部</span>
        <button @click="btnChange" v-if="btnNum">编辑</button>
        <button @click="btnChange" v-if="!btnNum">取消</button>
        <!-- <span id="two">编辑</span> -->
      </div>
      <van-divider />
      <movie-list
        v-for="index in 2"
        :key="index"
        :change="redact"
        :select="index"
        ></movie-list>
      <div class="support"></div>
    </div>
  </div>
</template>

<script>
import MovieList from "@/components/movie_list.vue";

export default {
  data() {
    return {
      btnNum: 1,
      redact: 1,
    };
  },
  components: {
    "movie-list": MovieList,
  },
  methods: {
    btnChange() {
      this.btnNum = !this.btnNum;
      if (this.btnNum == 0) {
        console.log("当前正在编辑页面", this.btnNum);
        this.redact = !this.redact
      }
      if(this.btnNum == 1){
        console.log("取消编辑")
        this.redact = !this.redact
      }
    },
  },
};
</script>

<style scoped>
.delete-button {
  height: 100%;
}
.support {
  height: 50px;
}
.wrap {
  margin-top: 45px;
}
.top {
  height: 15px;
}
.filmCount {
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: ; */
  margin-right: 1rem;
  /* margin-bottom: 5px; */
  font-size: 0.8rem;
  color: rgb(164, 165, 167);
}
.filmCount button {
  width: 50px;
  border: 1px;
  border-radius: 13px;
}
.head /deep/ .van-nav-bar .van-icon {
  color: black;
}
.head /deep/ .van-nav-bar .van-nav-bar__text {
  color: black;
}
</style>
